<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>典故</title>
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <script src="/js/jquery/jquery-3.4.1.js"></script>
    <script src="/js/service/common.js"></script>
    <script>
        let pSize;
        function searchData(pageNum, pageSize) {
            hiddenTip();
            if(pageSize){
                pSize = pageSize;
            }else{
                pageSize = pSize ? pSize : 10;
            }
            let pageParam = `&pageNum=${pageNum}&pageSize=${pageSize}`;
            $.ajax({
                url: "/notes/allusionList",
                data: $("#form").serialize() + pageParam,
                dataType: "json",
                success: function (json) {
                    if(json.code === 200){
                        let html = `<tr class="table-tr-head"><td style="width: 10%">序号</td>
                                <td style="width: 30%">典故</td>
                                <td style="width: 25%">出处</td>
                                <td style="width: 35%">内容</td></tr>`;
                        let page = json.data;
                        let poetryArr = page.records;
                        if(poetryArr){
                            for(let i = 0, j = poetryArr.length; i < j; i ++){
                                let trData = poetryArr[i];
                                let classId = "table-tr-content-" + ((i % 2) + 1);
                                let content = trData.content;
                                html += `<tr class=${classId}><td>${(i + 1)}</td>
                                    <td>${trData.keyWord}</td>
                                    <td><span class="href-next" onclick="poetryDetailById(${trData.poetryId})">${trData.title}</span></td>
                                    <td><span class="href-next" onclick="showTip('${content}')">${content.substring(0, 12)}...</span></td>
                                    </tr>`;
                            }
                        }
                        $("#table").html(html);
                        let current = page.current;
                        let pages = page.pages;
                        let prevPage = current === 1 ? 1 : current - 1;
                        let nextPage = current === pages ? pages : current + 1;
                        let size = page.size, total = page.total;
                        let addSize = size === total ? size : size + 1;
                        let downSize = size === 1 ? size : size - 1;
                        let changePage = `<span class="href-next" onclick="searchData(1, ${size})">首页</span>&nbsp;&nbsp;
                                <span>当前
                                <span type="button" class="href-next" onclick="searchData(${prevPage}, ${size})">-</span>
                                    ${current}
                                <span class="href-next" onclick="searchData(${nextPage}, ${size})">+</span>
                                页</span>&nbsp;&nbsp;
                                <span class="href-next" onclick="searchData(${pages}, ${size})">尾页</span>&nbsp;&nbsp;
                                <span>每页
                                <span class="href-next" onclick="searchData(${current}, ${downSize})">-</span>
                                    ${size}
                                <span class="href-next" onclick="searchData(${current}, ${addSize})">+</span>
                                条</span>&nbsp;&nbsp;
                                <span>共 ${pages} 页</span>&nbsp;&nbsp;
                                <span>共 ${total} 条</span>`;
                        $("#changePageDiv").html(changePage)
                    }else{
                        tipsMessage(json);
                    }
                }
            });
        }
        function showTip(line) {
            let tip = $("#tip");
            let span = '<span style="color: red; font-size: 20px; margin-left: 92%" onclick="hiddenTip()">x</span><br>';
            tip.css('display', 'block');
            tip.html(span + line);
        }
        function hiddenTip(){
            $("#tip").css('display', 'none')
        }
        window.onload = () => {
            setBackPageIsMainPageFlag();
            $.ajax({
                url: "/notes/allusionPoetry",
                dataType: "json",
                success: function (json) {
                    if(json.code === 200){
                        let arr = json.data;
                        let html = `<option value=''>---请选择---</option>`;
                        if(arr){
                            for(let i = 0, j = arr.length; i < j; i ++){
                                let o = arr[i];
                                html += `<option value=${o.poetryId}>${o.title}</option>`;
                            }
                        }
                        $("#poetryId").html(html);
                    }else{
                        tipsMessage(json);
                    }
                }
            });
            searchData(1, 10);
        }
    </script>
</head>
<body>
    <object class="object-top" data="/page/common/top"></object>
    <div>
        <div class="center-div">
            <form id="form">
                <label>
                    典故
                </label>
                <label>
                    <input type="text" name="keyWord">
                </label>
                <label>
                    题目
                </label>
                <label>
                    <select id="poetryId" name="poetryId" style="width: 10.9%"></select>
                </label><br>
                <label><input type="button" class="btn" value="查询" onclick="searchData(1)"></label>
                <label><input type="reset" class="btn" value="重置"></label>
            </form>
        </div>
        <div style="text-align: center; margin-top:2%">
            <table id="table" class="table-content" cellspacing="0">
            </table>
        </div>
        <div class="change-page-div" id="changePageDiv"></div>
        <div class="tip-div" id="tip" style="display: none"></div>
    </div>
</body>
</html>